<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示与隐藏</title>
    <script src="../../epii.js"></script>
    <style>
        .img1 {
            display: inline;
        }
    </style>
</head>
<body>
<div id="content">
    <h1 r-data="title" r-style="display: {h1_display}"> <!--第一种方法，直接在style中 用变量，不推荐-->
    </h1>
    <br>
    <img r-data="img_url" r-display="{img_show}-1==0"  class="img1"><!--第二种方法，使用 r-display 标签，推荐-->

</div>
<script>


    var myepii = epii(document.getElementById("content"));

    myepii.setData({
        title: "我是标题",
        h1_display:"block",
        img_url:"https://raw.githubusercontent.com/epaii/epii.js/master/docs/Epii.js.jpg",
        img_show:1
    });

    setTimeout(function () {//两种方法隐藏
        myepii.setData({
            h1_display:"none",
            img_show:0
        });
    }, 3000);

    setTimeout(function () {//两种方法隐藏
        myepii.setData({
            h1_display:"none",
            img_show:1
        });
    }, 6000);
</script>
</body>
</html>
